<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap4.5.min.css">
    <title>宠物模板</title>
    <style>
        li {
            list-style: none;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        .row {
            margin: 0;
        }
        
        @media (min-width:576px) {
            .container {
                max-width: 576px;
                padding: 0;
            }
        }
        
        @media (min-width:768px) {
            .container {
                max-width: 768px;
                padding: 0;
            }
        }
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                padding: 0;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px;
                padding: 0;
            }
        }
        
        .pets_title {
            text-align: center;
        }
        
        .pets_title span {
            color: #ffbc00;
        }
        
        .pets_title p {
            color: #666666;
        }
        
        .pets_list {
            margin-top: 30px;
        }
        
        .pets_list_fl_img img {
            width: 100%;
        }
        
        .pets_list_txt h4 {
            color: #ffbc00;
            margin-bottom: 30px;
        }
        
        .pets_list_txt {
            padding: 40px 45px;
        }
        
        .pets_list_fr_img {
            display: flex;
            justify-content: space-between;
        }
        
        .pets_list_fr_img img {
            width: 48%;
        }
        
        .pets_list_fr {
            display: flex;
            flex-direction: row-reverse;
        }
        
        .pets {
            padding: 50px 0;
            background-color: rgb(255, 251, 238);
        }
        
        .pets_list_txt p {
            color: #666666;
        }
        
        .pets_list_fl_img {
            overflow: hidden;
        }
        
        .pets_list_fl_img:hover img {
            cursor: pointer;
            transform: scale(1.2);
            transition: .8s;
        }
    </style>
</head>

<body>
    <div class="pets">
        <div class="container">
            <div class="pets_title">
                <h2>品牌理念</h2>
                <span>———</span>
                <p>BRAND IDEA</p>
            </div>
            <div class="pets_list">
                <ul class="row">
                    <li class="col-xl-6 col-lg-6 col-md-6 col-12">
                        <div class="pets_list_fl_img">
                            <img src="img/Pets/img1.webp" alt="">
                        </div>
                    </li>
                    <li class="col-xl-6 col-lg-6 col-md-6 col-12">
                        <div class="pets_list_txt">
                            <h4>我们的愿景</h4>
                            <p>长久以来，我们的宠物品牌不只在商品服务的质量与创新方面建立了相当声誉，更赢得顾客的高度和信赖。我们品牌的使命是顾客为其宠物追寻健康、美丽、快乐的路途上，为他们带来涣然一新的购物体验，让每一位顾客都能因为拥有宠物享受爱与被爱的丰盛人生。</p>
                        </div>
                    </li>
                </ul>
                <ul class="row pets_list_fr">
                    <li class="col-xl-6 col-lg-6 col-md-6 col-12">
                        <div class="pets_list_fr_img">
                            <img src="img/Pets/img2.webp" alt="">
                            <img src="img/Pets/img3.webp" alt="">
                        </div>
                    </li>
                    <li class="col-xl-6 col-lg-6 col-md-6 col-12">
                        <div class="pets_list_txt">
                            <h4>品质的保证</h4>
                            <p>我们承诺会源源不断得为顾客奉上高质量的产品、专业的服务、时尚的咨询，令人惊喜不断的购物环境及超值的产品价值。采购国内外优质的宠物品种和宠物食品，保证宠物的健康安全；我们以专业的实力和贴心的服务，不断提升品质，为实现宠儿的愿景共同努力！</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>